<!DOCTYPE html>
<html>
<head>
    <title>^_^</title>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <style>
        #vue{
            position: absolute;
        }
        #vue>div{
            position: absolute; width: 10px; height: 10px; background-color: #f09; border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="vue"></div>
    <script id="main" type="x-template">
        <div id="vue" :style="{ width: conf.width + 'px', height: conf.width + 'px' }">
            <div v-for="(item,index) in items" :key="index" :style="{ left: item.left + 'px', top: item.top + 'px', width: conf.itemWidth + 'px', height: conf.itemWidth + 'px' }"></div>
        </div>
    </script>
    <script type="text/javascript">
    const conf = {
        width: 400,
        itemWidth: 10,
    };

    new Vue({
        el: '#vue',
        template: '#main',
        data: {
            items: [],
            conf,
        },
        created () {
            this.createItem(10);
            requestAnimationFrame(t => this.run(t));
        },
        methods: {
            createItem (num) {
                for (let i = 0; i < num; i++) {
                    this.items.push({
                        left: this.random(conf.width),
                        top: this.random(conf.width),
                        vx: 1 - this.random(2),
                        vy: 1 - this.random(2),
                    });
                }
            },
            random (num) {
                return Math.random() * num;
            },
            run (t) {
                this.items.forEach(item => {
                    item.left += item.vx;
                    item.top += item.vy;
                    if (item.left > conf.width || item.left < 0) item.vx = -item.vx;
                    if (item.top > conf.width || item.top < 0) item.vy = -item.vy;
                });
                this.$nextTick(v => {
                    requestAnimationFrame(t => this.run(t));
                });
            },
        },
    });
    </script>
</body>
</html>